<template>
  <div class="container clearfix">
    <div class="tab clearfix">
      <div class="tab-item"
           v-for="(item, index) in tab_arr"
           :key="index"
           @tap="toggle_tab(item.id)">
        <div class="msg"
             :class="{'active':item.id==type}">{{item.type}}</div>
      </div>
    </div>
    <div class="result">
      <!-- 全部 -->
      <all v-if="type==0"
           :result_status="result_status"
           @toggle_tab="toggle_tab"
           :all_list="all_arr">
      </all>
      <!-- 医生 -->
      <doctors v-if="type==3"
               :doc_result="doctors_arr"
               @loadMore="infinite_scroll"
               :tobottom="isbottom">
      </doctors>
      <!-- 医院 -->
      <hospital v-if="type==4"
                :hos_result="hospital_arr"
                @loadMore="infinite_scroll"
                :tobottom="isbottom">
      </hospital>
      <!-- 项目 -->
      <projects v-if="type==1"
                :project_result="projects_arr"
                @loadMore="infinite_scroll"
                :tobottom="isbottom">
      </projects>
      <!-- 商品 -->
      <goods v-if="type==2"
             :goods_result="goods_arr"
             @loadMore="infinite_scroll"
             :tobottom="isbottom">
      </goods>

    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
// 引入结果项
import all from '@/components/search/result_item/all'
import doctors from '@/components/search/result_item/doctors'
import hospital from '@/components/search/result_item/hospital'
import projects from '@/components/search/result_item/projects'
import goods from '@/components/search/result_item/goods'
export default {
  data () {
    return {
      img_url: common.image_resource,
      base_url: common.image_response,
      tab_arr: [
        {
          type: "全部",
          id: 0
        },
        {
          type: "医生",
          id: 3
        },
        {
          type: "医院",
          id: 4
        },
        {
          type: "项目",
          id: 1
        },
        {
          type: "商品",
          id: 2
        }
      ],
      type: 0,
      project_list: [],
      goods_list: [],
      show_all_goods: false,
      show_all_projects: false,
      all_arr: {},
      doctors_arr: [],
      hospital_arr: [],
      projects_arr: [],
      goods_arr: [],
      latitude: "",
      longitude: "",
      page: 1,
      pageSize: 10,
      isbottom: false
    };
  },
  methods: {
    toggle_tab (tab) {
      if (tab != this.type) {
        this.page = 1
        this.isbottom = false
        this.type = tab;
        this.get_result();
      }
    },
    get_location () {
      // 获取经纬度
      let that = this
      wx.getLocation({
        type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          that.latitude = res.latitude
          that.longitude = res.longitude
          this.get_result();
        },
        fail: () => {
          wx.showToast({
            title: '获取地理位置失败', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    get_result () {
      let that = this
      if (this.isbottom) {
        return false
      }
      if (this.key_word == "") {
        wx.showToast({
          title: "请输入搜索内容", //提示的内容,
          icon: "none", //图标,
          duration: 1500, //延迟时间,
          mask: false, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        return false;
      } else {
        //   开始搜索
        wx.showLoading({
          title: '搜索中', //提示的内容,
          mask: true, //显示透明蒙层，防止触摸穿透,
          success: res => { }
        });
        common.fly_post("api/v4_5/home/search", {
          keyword: this.key_word,
          type: this.type,
          lng: this.longitude,
          lat: this.latitude,
          page: this.page,
          pageSize: this.pageSize,
          user_id: wx.getStorageSync('user_id')
        }, result => {
          let res = result.data
          wx.hideLoading();
          if (res.status_code == '0') {
            switch (this.type) {
              case 0:
                let total = res.data.total
                res.data.total_num = total.doctor_total + total.hospital_total + total.projects_total + total.shops_total
                this.all_arr = res.data
                break;
              case 1:
                //  项目 
                if (this.page == 1) {
                  this.projects_arr = res.data.data
                } else if (this.page > 1 && res.data.data.length > 0) {
                  this.projects_arr.push(...res.data.data)
                } else if (this.page > 1 && res.data.data.length == 0) {
                  this.isbottom = true
                }

                break;
              case 2:
                //  商品
                if (this.page == 1) {
                  this.goods_arr = res.data.data
                } else if (this.page > 1 && res.data.data.length > 0) {
                  this.goods_arr.push(...res.data.data)
                } else if (this.page > 1 && res.data.data.length == 0) {
                  this.isbottom = true
                }

                break;
              case 3:
                //  医生
                if (this.page == 1) {
                  this.doctors_arr = res.data.data
                } else if (this.page > 1 && res.data.data.length > 0) {
                  this.doctors_arr.push(...res.data.data)
                }
                else if (this.page > 1 && res.data.data.length == 0) {
                  this.isbottom = true
                }
                break;
              case 4:
                //  医院
                if (this.page == 1) {
                  this.hospital_arr = res.data.data
                } else if (this.page > 1 && res.data.data.length > 0) {
                  this.hospital_arr.push(...res.data.data)
                } else if (this.page > 1 && res.data.data.length == 0) {
                  this.isbottom = true
                }
                break;
              default:
                break;
            }
            wx.getStorage({
              key: "search_history",
              success: res => {
                let arr = res.data, new_arr = []
                if (arr.length >= 10) {
                  arr.pop()
                  arr.unshift(that.key_word);
                  arr.forEach(item => {
                    if (!new_arr.includes(item)) {
                      new_arr.push(item)
                    }
                  });
                  wx.setStorageSync("search_history", new_arr);
                } else {
                  arr.unshift(that.key_word);
                  arr.forEach(item => {
                    if (!new_arr.includes(item)) {
                      new_arr.push(item)
                    }
                  });
                  wx.setStorageSync("search_history", new_arr);
                }
              },
              fail: () => {
                wx.setStorageSync("search_history", [that.key_word]);
              },
              complete: () => { }
            });
          }
        })
      }

    },
    show_all (type) {
      this.type = type;
      this.get_result();
    },
    infinite_scroll () {
      this.page++
      this.get_result()
    }
  },
  props: ["key_word", "result_status"],
  components: {
    all,
    doctors,
    hospital,
    projects,
    goods,
  },
  watch: {
    key_word (newVal, oldVal) {
      this.get_result();
    },
    result_status (newVal, oldVal) {

    },
    all_arr (newVal) { },
    doctors_arr (newVal) { },
    hospital_arr (newVal) { },
    projects_arr (newVal) { },
    goods_arr (newVal) { },
  },
  mounted () {
    if (this.result_status == 2) {
      this.tab_arr.pop()
    }
    this.get_location()
  }

};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  .tab {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    display: flex;
    margin-bottom: 10px;
    .tab-item {
      flex: 1;
      text-align: center;
      .msg {
        height: 100%;
        line-height: 40px;
        display: inline-block;
        font-size: 14px;
        font-family: "Medium";
        color: rgba(102, 102, 102, 1);
      }
      .active {
        color: rgba(255, 56, 62, 1);
        position: relative;
        &::before {
          content: "";
          width: 100%;
          height: 2px;
          background-color: rgba(255, 56, 62, 1);
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .result {
    width: 100%;
    flex: 1;
    overflow: hidden;

    .all {
      .project-list {
        .title {
          line-height: 37px;
          font-size: 12px;
          font-family: "Medium";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding-left: 15px;
        }
        .list {
          height: 222px;
          overflow: hidden;
          transition: all 1s;
          .list-item {
            background-color: #fff;
            margin-bottom: 1px;
            display: flex;
            padding: 10px 0;
            .logo {
              width: 110px;
              height: 90px;
              margin-left: 5px;
              position: relative;
              .img {
                width: 90px;
                height: 90px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
              }
              .buyingImg {
                width: 44px;
                height: 17px;
                line-height: 17px;
                background: linear-gradient(
                  315deg,
                  rgba(230, 27, 100, 1) 0%,
                  rgba(255, 56, 62, 1) 100%
                );
                border-radius: 4px;
                position: absolute;
                z-index: 1;
                color: #fff;
                text-align: center;
                font-size: 10px;
                bottom: 5%;
                right: 14%;
              }
            }
            .info {
              flex: 1;
              height: 90px;
              padding-right: 15px;
              position: relative;
              .project-name {
                font-size: 14px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
              }
              .hospital {
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                margin-top: 5px;
                position: relative;
                .distance {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  .locate {
                    width: 16px;
                    height: 12px;
                    vertical-align: baseline;
                  }
                }
              }
              .price {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                vertical-align: bottom;
                .left {
                  float: left;
                  font-size: 12px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 56, 62, 1);
                  vertical-align: bottom;
                  .icon {
                    font-size: 10px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: bottom;
                  }
                  .num {
                    font-size: 16px;
                    font-family: "Medium";
                    font-weight: 500;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: bottom;
                    margin-right: 2px;
                  }
                }
                .right {
                  float: right;
                  margin-right: 15px;
                  vertical-align: bottom;
                  margin-top: 3px;
                  .icon {
                    display: inline-block;
                    vertical-align: bottom;
                    padding: 0 5px;
                    line-height: 16px;
                    background: rgba(255, 133, 154, 1);
                    border-radius: 16px;
                    font-size: 10px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    margin-right: 5px;
                  }
                  .num {
                    font-size: 12px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 133, 154, 1);
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
        .all_list {
          height: auto;
          overflow: auto;
        }
        .bottom {
          line-height: 37px;
          text-align: center;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          background-color: #fff;
        }
      }
      .goods-list {
        .title {
          line-height: 37px;
          font-size: 12px;
          font-family: "Medium";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding-left: 15px;
        }
        .list {
          height: 162px;
          overflow: hidden;
          transition: all 1s;
          .goods-item {
            background-color: #fff;
            margin-bottom: 1px;
            display: flex;
            padding: 10px 0;
            .logo {
              width: 80px;
              height: 60px;
              margin-left: 5px;
              position: relative;
              .img {
                width: 60px;
                height: 60px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
              }
              .tip {
                width: 48px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 10px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                background: url("https://h5.ameimeika.com/mp_images/mp_2.0/shouye/tag.png")
                  no-repeat;
                background-size: 100% 100%;
                position: absolute;
                right: 10px;
                bottom: 5px;
                z-index: 10;
              }
            }
            .info {
              flex: 1;
              height: 60px;
              padding-right: 15px;
              position: relative;
              .goods-name {
                font-size: 14px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
              }
              .price {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                vertical-align: bottom;
                .left {
                  float: left;
                  .rmb {
                    font-size: 16px;
                    font-family: "STHeitiTC-Medium";
                    font-weight: 500;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: baseline;
                    .icon {
                      display: inline-block;
                      vertical-align: baseline;
                      font-size: 10px;
                      font-family: "PingFangSC-Regular";
                      font-weight: 400;
                      color: rgba(255, 56, 62, 1);
                    }
                  }
                  .and {
                    font-size: 16px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(68, 68, 68, 1);
                    display: inline-block;
                    vertical-align: baseline;
                  }
                  .integral {
                    display: inline-block;
                    vertical-align: baseline;
                    font-size: 16px;
                    font-family: "STHeitiTC-Medium";
                    font-weight: 500;
                    color: rgba(255, 113, 0, 1);

                    .icon {
                      display: inline-block;
                      vertical-align: baseline;
                      font-size: 10px;
                      font-family: "PingFangSC-Regular";
                      font-weight: 400;
                      color: rgba(255, 113, 0, 1);
                    }
                  }
                }
                .right {
                  float: right;
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                  margin-right: 15px;
                  margin-top: 3px;
                }
              }
            }
          }
        }
        .all_list {
          height: auto;
          overflow: auto;
        }
        .bottom {
          line-height: 37px;
          text-align: center;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          background-color: #fff;
        }
      }
    }
    .projects {
      .project-list {
        .title {
          line-height: 37px;
          font-size: 12px;
          font-family: "Medium";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding-left: 15px;
        }
        .list {
          .list-item {
            background-color: #fff;
            margin-bottom: 1px;
            display: flex;
            padding: 10px 0;
            .logo {
              width: 110px;
              height: 90px;
              margin-left: 5px;
              position: relative;
              .img {
                width: 90px;
                height: 90px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
              }
              .buyingImg {
                width: 44px;
                height: 17px;
                line-height: 17px;
                background: linear-gradient(
                  315deg,
                  rgba(230, 27, 100, 1) 0%,
                  rgba(255, 56, 62, 1) 100%
                );
                border-radius: 4px;
                position: absolute;
                z-index: 1;
                color: #fff;
                text-align: center;
                font-size: 10px;
                bottom: 5%;
                right: 14%;
              }
            }
            .info {
              flex: 1;
              height: 90px;
              padding-right: 15px;
              position: relative;
              .project-name {
                font-size: 14px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
              }
              .hospital {
                font-size: 12px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                margin-top: 5px;
                position: relative;
                .distance {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  .locate {
                    width: 16px;
                    height: 12px;
                    vertical-align: baseline;
                  }
                }
              }
              .price {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                vertical-align: bottom;
                .left {
                  float: left;
                  font-size: 12px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(255, 56, 62, 1);
                  vertical-align: bottom;
                  .icon {
                    font-size: 10px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: bottom;
                  }
                  .num {
                    font-size: 16px;
                    font-family: "Medium";
                    font-weight: 500;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: bottom;
                    margin-right: 2px;
                  }
                }
                .right {
                  float: right;
                  margin-right: 15px;
                  vertical-align: bottom;
                  margin-top: 3px;
                  .icon {
                    display: inline-block;
                    vertical-align: bottom;
                    padding: 0 5px;
                    line-height: 16px;
                    background: rgba(255, 133, 154, 1);
                    border-radius: 16px;
                    font-size: 10px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    margin-right: 5px;
                  }
                  .num {
                    font-size: 12px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 133, 154, 1);
                    margin-right: 5px;
                  }
                }
              }
            }
          }
        }
        .all_list {
          height: auto;
          overflow: auto;
        }
        .bottom {
          line-height: 37px;
          text-align: center;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          background-color: #fff;
        }
      }
    }
    .goods {
      .goods-list {
        .title {
          line-height: 37px;
          font-size: 12px;
          font-family: "Medium";
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          padding-left: 15px;
        }
        .list {
          .goods-item {
            background-color: #fff;
            margin-bottom: 1px;
            display: flex;
            padding: 10px 0;
            .logo {
              width: 80px;
              height: 60px;
              margin-left: 5px;
              position: relative;
              .img {
                width: 60px;
                height: 60px;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background-color: #ccc;
              }
              .tip {
                width: 48px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 10px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                background: url("https://h5.ameimeika.com/mp_images/mp_2.0/shouye/tag.png")
                  no-repeat;
                background-size: 100% 100%;
                position: absolute;
                right: 10px;
                bottom: 5px;
                z-index: 10;
              }
            }
            .info {
              flex: 1;
              height: 60px;
              padding-right: 15px;
              position: relative;
              .goods-name {
                font-size: 14px;
                font-family: "PingFangSC-Regular";
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                line-height: 16px;
              }
              .price {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                vertical-align: bottom;
                .left {
                  float: left;
                  .rmb {
                    font-size: 16px;
                    font-family: "STHeitiTC-Medium";
                    font-weight: 500;
                    color: rgba(255, 56, 62, 1);
                    display: inline-block;
                    vertical-align: baseline;
                    .icon {
                      display: inline-block;
                      vertical-align: baseline;
                      font-size: 10px;
                      font-family: "PingFangSC-Regular";
                      font-weight: 400;
                      color: rgba(255, 56, 62, 1);
                    }
                  }
                  .and {
                    font-size: 16px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(68, 68, 68, 1);
                    display: inline-block;
                    vertical-align: baseline;
                  }
                  .integral {
                    display: inline-block;
                    vertical-align: baseline;
                    font-size: 16px;
                    font-family: "STHeitiTC-Medium";
                    font-weight: 500;
                    color: rgba(255, 113, 0, 1);
                    .icon {
                      display: inline-block;
                      vertical-align: baseline;
                      font-size: 10px;
                      font-family: "PingFangSC-Regular";
                      font-weight: 400;
                      color: rgba(255, 113, 0, 1);
                    }
                  }
                }
                .right {
                  float: right;
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                  margin-right: 15px;
                  margin-top: 3px;
                }
              }
            }
          }
        }
        .all_list {
          height: auto;
          overflow: auto;
        }
        .bottom {
          line-height: 37px;
          text-align: center;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          background-color: #fff;
        }
      }
    }
  }
}
</style>

